<template>
  <!-- 需要购买并且是小程序ios，直接咨询客服 -->
  <div v-if="isNeedPay && $isWxAppIos()" class="c-box-shadow9 c-flex-row c-ph24 c-aligni-center c-justify-sb c-bd-t1 c-hh88 c-pf c-p-b0 c-w100 c-maxw640 c-bg-white c-pz1">
    <!-- 邀请好友 -->
    <div v-if="showInvitionCard" @click="spreadInvite" class="c-flex-column c-aligni-center c-pr40 c-hh64 c-justify-sb">
      <img src="@/assets/i/wap/course/btn_share.png" class="invite-animation c-hh36 img-pe-none" />
      <span v-if="showShareMoneyTip && deductibleAfterInvition" class="c-fs18">赚{{'￥' | iosPriceFilter('Live')}}{{deductibleAfterInvition}}</span>
      <span v-else class="c-fs16">邀请好友</span>
    </div>
    <div v-if="isCustServiceOpen" class="c-fs24 c-fc-white theme-bg c-hh60 c-br30 c-flex-row c-flex-center c-flex-grow1" @click="goWxAppContact()">
      咨询客服
    </div>
  </div>
  <article v-else-if="!isNew">
    <!-- <div v-if="isOffSale" class="c-itfc c-fs22 c-hh48 c-w100 c-flex-row c-flex-center c-pf p-b88 bg-off-sale c-maxw640 c-pz1">商品已下架，看看其他内容吧</div>
    <div v-else-if="hasExpired" class="c-itfc c-fs22 c-hh48 c-w100 c-flex-row c-flex-center c-pf p-b88 bg-off-sale c-maxw640 c-pz1">商品已失效，看看其他内容吧</div>
    <div v-else-if="showNotSale" class="c-itfc c-fs22 c-hh48 c-w100 c-flex-row c-flex-center c-pf p-b88 bg-off-sale c-maxw640 c-pz1">商品已停售，看看其他内容吧</div> -->
    <div v-if="timingPutOn" class="c-itfc c-fs22 c-hh48 c-w100 c-flex-row c-flex-center c-pf p-b88 bg-off-sale c-maxw640 c-pz1">距离开售还剩<cj-clocker class="c-fw-b" :time="delayTime" @on-finish="finishFn()"></cj-clocker></div>
    <section :class="[theme, isShowPartner ? ' c-box-shadow9' : '']" class=" c-flex-row c-pl32 c-pr24 c-aligni-center c-justify-sb c-bd-t1 c-hh88 c-pf c-p-b0 c-w100 c-maxw640 c-bg-white c-pz1">
      <!-- 邀请好友 -->
      <div v-if="showInvitionCard" @click="spreadInvite" class="c-flex-column c-aligni-center c-pr24 c-hh64 c-justify-sb">
        <img src="@/assets/i/wap/course/btn_share.png" class="invite-animation c-hh36 img-pe-none" />
        <span v-if="showShareMoneyTip && deductibleAfterInvition" class="c-fs18">赚{{'￥' | iosPriceFilter('Live')}}{{deductibleAfterInvition}}</span>
        <span v-else class="c-fs16">邀请好友</span>
      </div>
      <!-- 活动分享海报 -->
      <div v-if="showMarketingCard && !$isWxApp()" @click="invitePoster" class="c-flex-column c-aligni-center c-justify-sb c-pr24 c-hh64">
        <div class="c-textAlign-c c-lh32"><img class="c-ww30 img-pe-none" src="@/assets/i/wap/spread/poster-share.png" alt=""></div>
        <span class="c-fc-xblack c-fs16">活动海报</span>
      </div>
      <div v-if="showShareFriends && !$isWxApp()" @click="shareFriends" class="c-fc-sblack c-flex-column c-aligni-center c-justify-sb c-pr24 c-hh64">
        <div class="c-textAlign-c c-lh32"><div class="iconfont">&#xe868;</div></div>
        <span class="c-fs16">分享好友</span>
      </div>
      <!-- 服务商海报 -->
      <div v-if="showSpreadAgent && !$isWxApp()" @click="spreadAgent" class="c-aligni-center c-hh64" :class="isShowPartner ? 'c-flex-row c-justify-center c-w50' : 'c-pr24 c-flex-column c-justify-sb'">
        <div class="c-textAlign-c c-lh40 c-ww32"><img src="@/assets/i/wap/course/btn_share.png" class=" c-inlineblack c-hh36 img-pe-none c-ww36 invite-animation"/></div>
        <span class="c-fc-xblack " :class="isShowPartner ? 'c-pl16 c-fs24 c-lh34' : 'c-fs16 c-lh1'">{{sreadAgentName || customName.serviceProviderName}}海报</span>
      </div>
      <!--好友赠送-->
      <div v-if="showPresentFriend && isIosGzhPay && !notSale && !$isWxApp()" @click="isShowPresent = true" class="c-flex-column c-aligni-center c-pr24 c-justify-sb c-hh64">
        <div class="yqImg c-textAlign-c c-lh32"><span class="iconfont c-fc-sblack c-fs28">&#xe7d2;</span></div>
        <span class="c-fc-xblack c-fs16">赠送好友</span>
      </div>
      <div v-if="showCommentBtn && !isOffSale && !hasExpired && !timingPutOn" @click="clickComment" class="c-flex-column c-aligni-center c-pr24 c-justify-sb c-hh64">
        <div class="c-textAlign-c c-lh32 c-mt4"><span class="iconfont c-fc-sblack c-fs40 c-inlineblack c-pv2">&#xe76a;</span></div>
        <span class="c-fc-xblack c-fs16">评论</span>
      </div>
      <div v-if="showKnowledge" @click="seeKnowledgePoint" class="c-flex-column c-aligni-center c-pr24 c-justify-sb c-hh64">
        <div class="c-textAlign-c c-lh32 c-mt4"><span class="iconfont c-fc-sblack c-fs40 c-inlineblack c-pv2">&#xe97c;</span></div>
        <span class="c-fc-xblack c-fs16">知识点</span>
      </div>
      <!-- 停止售卖 && 没有权限需要购买 -->
      <div v-if="showNotSale || hasExpired || isOffSale" @click="goHomePage" class="theme-bg c-fc-white c-lh c-w0 c-flex-grow1 c-flex-row c-flex-center c-hh64 c-br36 c-fs28">商品已{{isOffSale ? '下架' : showNotSale ? '停售' : '失效'}}，看看其他内容吧</div>
      <div v-else-if="timingPutOn" @click="goHomePage" class="theme-bg c-fc-white c-lh c-w0 c-flex-grow1 c-flex-row c-flex-center c-hh64 c-br36 c-fs28">查看其他内容</div>
      <!-- 购买套餐 -->
      <div v-else-if="isIosGzhPay && showBuyPackage" @click="backPackage" class="c-fs24 theme-fc theme-bd1 c-pv12 c-br30 c-ph40 c-textAlign-c">
        购买套餐
      </div>
      <!-- 好友助力 && 屏蔽微信支付 -->
      <div v-else-if="!isIosGzhPay && showFriendHelper" :class="!showInvitionCard && !showMarketingCard && !showPresentFriend ? 'c-w100 c-flex-center':''" class="c-flex-row c-hh64">
        <div class="c-h c-fs26 c-flex-column c-aligni-center theme-fc c-justify-sa theme-bd1 c-ww196 c-br32 c-mr10" @click="clickIosExperience">
          立即体验
        </div>
        <div class="c-h c-fs26 c-flex-column c-aligni-center c-fc-white c-justify-sa c-ww196 c-br32" :class="friendHelperStatus == 2 ? 'theme-bg' : 'c-bg-d7'" @click="goHelpDetail">
          灌溉领取
        </div>
      </div>
      <!-- 屏蔽支付 &&  （显示购买按钮 || 拼团） -->
      <div v-else-if="!isIosGzhPay && (showBuyButton || showBuyPackage)" @click="clickIosExperience" class="theme-bg c-fc-white c-lh c-w0 c-flex-grow1 c-flex-row c-flex-center c-hh64 c-br36 c-fs28">立即体验</div>
      <!-- 展示表单（如果有权限但是没有填写过表单的，又关连表单的展示，如果没权限又关表单的则在立即购买的函数中处理） -->
      <div v-else-if="showFormText" @click="clickGoForm" class="theme-bg c-fc-white c-lh c-w0 c-flex-grow1 c-flex-row c-flex-center c-hh64 c-br36 c-fs28">立即学习</div>
      <!-- 正常显示 -->
      <div v-else id="btnSlot" class="c-flex-grow1 c-flex-row c-aligni-center c-justify-end" :class="isShowPartner?'c-w50':'c-w0'">
        <div class="line-column c-hh20" v-if="isShowPartner">|</div>
        <slot></slot>
      </div>
    </section>
    <share-present :ckFromTitle="ckFromTitle" :isShowPresent="isShowPresent" v-show="isShowPresent" @closePresent="isShowPresent=false;" @goPresent="presentFriend"></share-present>
  </article>
  <article v-else>
    <!-- <div v-if="isOffSale" class="c-itfc c-fs22 c-hh48 c-w100 c-flex-row c-flex-center c-pf p-b88 bg-off-sale c-maxw640 c-pz1">商品已下架，看看其他内容吧</div>
    <div v-else-if="hasExpired" class="c-itfc c-fs22 c-hh48 c-w100 c-flex-row c-flex-center c-pf p-b88 bg-off-sale c-maxw640 c-pz1">商品已失效，看看其他内容吧</div>
    <div v-else-if="showNotSale" class="c-itfc c-fs22 c-hh48 c-w100 c-flex-row c-flex-center c-pf p-b88 bg-off-sale c-maxw640 c-pz1">商品已停售，看看其他内容吧</div> -->
    <div v-if="timingPutOn" class="c-itfc c-fs22 c-hh48 c-w100 c-flex-row c-flex-center c-pf p-b88 bg-off-sale c-maxw640 c-pz1">距离开售还剩<cj-clocker class="c-fw-b" :time="delayTime" @on-finish="finishFn()"></cj-clocker></div>
    <div v-if="isUserGroupUrl&&!(showNotSale && !showBackPackage)" class="c-ph24 c-fs20 c-hh60 c-w100 c-flex-row c-justify-sb c-aligni-center c-pf p-b88 c-maxw640 c-pz1 urlShadow c-bg-white c-pz1">
      <div class="c-flex-row c-aligni-center"><div class="iconfont c-fs28 c-fc-myellow c-mr12">&#xe876;</div>点击右侧按钮了解更多</div>
      <div class="c-flex-row c-aligni-center c-fc-gray" @click="handleClickDetail">查看详情<span class="iconfont c-fs20 c-fc-gray">&#xe635;</span></div>
    </div>
    <section :class="[theme, (isShowPartner ? ' c-box-shadow9' : ''), (hasBtn&&!isUserGroupUrl ? 'bottom-shadow c-bd-t1' : '')]" class=" c-flex-row c-pl24 c-pr24 c-aligni-center c-justify-sb c-hh88 c-pf c-p-b0 c-w100 c-maxw640 c-bg-white c-pz1">
      <div v-if="!((isOffSale || showNotSale || hasExpired || timingPutOn) && !showBackPackage)" class="c-hh68 c-text-hidden">
        <div class="c-p">
          <div v-if="!isDistribution" class="c-flex-row c-aligni-center c-hh68">
            <!--好友赠送-->
            <div v-if="showPresentFriend && isIosGzhPay && !notSale && !isOffSale && !hasExpired && !timingPutOn && !$isWxApp()" @click="isShowPresent = true" class="c-flex-column c-aligni-center c-pr24 c-justify-sb c-hh64">
              <div class="yqImg c-textAlign-c c-lh40"><span class="iconfont c-fc-sblack c-fs40">&#xe7b9;</span></div>
              <span class="c-fc-xblack c-fs16">赠送</span>
            </div>
            <!-- 邀请好友 -->
            <div v-if="showInvitionCard && !isOffSale && !hasExpired && !timingPutOn" @click="spreadInvite" class="c-flex-column c-aligni-center c-pr24 c-hh64 c-justify-sb">
              <div class="yqImg c-textAlign-c c-lh40"><span class="iconfont c-fc-sblack c-fs40">&#xe7b2;</span></div>
              <span v-if="showShareMoneyTip && deductibleAfterInvition" class="c-fs18">赚{{'￥' | iosPriceFilter('Live')}}{{deductibleAfterInvition}}</span>
              <span v-else class="c-fs16">邀请</span>
            </div>
            <!-- 活动分享海报 -->
            <div v-if="showMarketingCard && !isOffSale && !hasExpired && !timingPutOn && !$isWxApp()" @click="invitePoster" class="c-flex-column c-aligni-center c-justify-sb c-pr24 c-hh64">
              <div class="yqImg c-textAlign-c c-lh40"><span class="iconfont c-fc-sblack c-fs40">&#xe7c1;</span></div>
              <span class="c-fc-xblack c-fs16">活动海报</span>
            </div>
            <!-- 服务商海报 -->
            <div v-if="showSpreadAgent && !isOffSale && !hasExpired && !timingPutOn && !$isWxApp()" @click="spreadAgent" class="c-aligni-center c-hh64" :class="isShowPartner ? 'c-flex-row c-justify-center c-w50' : 'c-pr24 c-flex-column c-justify-sb'">
              <div class="c-textAlign-c c-lh40 c-ww32"><img src="@/assets/i/wap/course/btn_share.png" class=" c-inlineblack c-hh36 img-pe-none c-ww36 invite-animation"/></div>
              <span class="c-fc-xblack " :class="isShowPartner ? 'c-pl16 c-fs24 c-lh34' : 'c-fs16 c-lh1'">{{sreadAgentName || customName.serviceProviderName}}海报</span>
            </div>
            <div v-if="showCommentBtn && !isOffSale && !hasExpired && !timingPutOn" @click="clickComment" class="c-flex-column c-aligni-center c-pr24 c-justify-sb c-hh64">
              <div class="c-textAlign-c c-lh32 c-mt4"><span class="iconfont c-fc-sblack c-fs40 c-inlineblack c-pv2">&#xe76a;</span></div>
              <span class="c-fc-xblack c-fs16">评论</span>
            </div>
            <div v-if="isGroupPurchase" @click="clickGroupPurchase" class="c-flex-column c-aligni-center c-pr24 c-justify-sb c-hh64">
              <div class="c-textAlign-c c-lh32 c-mt4"><span class="iconfont c-fc-sblack c-fs28 c-inlineblack c-pv2">&#xe792;</span></div>
              <span class="c-fc-xblack c-fs16">团购</span>
            </div>
            <div v-if="showKnowledge" @click="seeKnowledgePoint" class="c-flex-column c-aligni-center c-pr24 c-justify-sb c-hh64">
              <div class="c-textAlign-c c-lh32 c-mt4"><span class="iconfont c-fc-sblack c-fs36 c-inlineblack c-pv2">&#xe97c;</span></div>
              <span class="c-fc-xblack c-fs16">知识点</span>
            </div>
            <div v-if="showBelong" @click="showBelongCourse" class="c-flex-column c-aligni-center c-pr24 c-justify-sb c-hh64">
              <div class="c-textAlign-c c-lh32 c-mt4"><span class="iconfont c-fc-sblack c-fs32 c-inlineblack c-pv2">&#xe870;</span></div>
              <span class="c-fc-xblack c-fs16">所属课程</span>
            </div>
            <div v-if="tryStudy" @click="clickTryStudy" class="c-flex-column c-aligni-center c-pr24 c-justify-sb c-hh64">
              <div class="c-textAlign-c c-lh32 c-mt4">
                <span class="iconfont theme-fc  c-inlineblack c-pv2 c-fs32">&#xe64b;</span>
              </div>
              <span class="c-fc-xblack c-fs16">试学</span>
            </div>
          </div>
        </div>
      </div>
      <!-- 停止售卖 && ！展示所属专栏 -->
      <div v-if="isOffSale && !showBackPackage" @click="goHomePage" class="theme-bg c-fc-white c-lh c-w0 c-flex-grow1 c-flex-row c-flex-center c-hh64 c-br36 c-fs28">商品已下架，看看其他内容吧</div>
      <div v-else-if="showNotSale && !showBackPackage" @click="goHomePage" class="theme-bg c-fc-white c-lh c-w0 c-flex-grow1 c-flex-row c-flex-center c-hh64 c-br36 c-fs28">商品已停售，看看其他内容吧</div>
      <div v-else-if="hasExpired && !showBackPackage" @click="goHomePage" class="theme-bg c-fc-white c-lh c-w0 c-flex-grow1 c-flex-row c-flex-center c-hh64 c-br36 c-fs28">商品已失效，看看其他内容吧</div>
      <div v-else-if="timingPutOn && !showBackPackage" @click="goHomePage" class="theme-bg c-fc-white c-lh c-w0 c-flex-grow1 c-flex-row c-flex-center c-hh64 c-br36 c-fs28">查看其他内容</div>
      <div v-else-if="isOffSale && showBackPackage" class="c-lh c-w0 c-flex-grow1 c-flex-row c-br36 c-fs28 c-text-hidden">
        <div class="c-hh64 c-w50 c-flex-row c-flex-center c-fc-white theme-bg">所属专栏</div>
        <div class="c-hh64 c-bg-d7 c-w50 c-flex-row c-flex-center c-fc-white">立即购买</div>
      </div>
      <div v-else-if="showNotSale && showBackPackage" class="c-lh c-w0 c-flex-grow1 c-flex-row c-br36 c-fs28 c-text-hidden">
        <div class="c-hh64 c-w50 c-flex-row c-flex-center c-fc-white theme-bg">所属专栏</div>
        <div class="c-hh64 c-bg-d7 c-w50 c-flex-row c-flex-center c-fc-white">暂不支持售卖</div>
      </div>
      <div v-else-if="hasExpired && showBackPackage" class="c-lh c-w0 c-flex-grow1 c-flex-row c-br36 c-fs28 c-text-hidden">
        <div class="c-hh64 c-w50 c-flex-row c-flex-center c-fc-white theme-bg">所属专栏</div>
        <div class="c-hh64 c-bg-d7 c-w50 c-flex-row c-flex-center c-fc-white">立即购买</div>
      </div>
      <div v-else-if="timingPutOn && showBackPackage" class="c-lh c-w0 c-flex-grow1 c-flex-row c-br36 c-fs28 c-text-hidden">
        <div class="c-hh64 c-w50 c-flex-row c-flex-center c-fc-white theme-bg">所属专栏</div>
        <div class="c-hh64 c-bg-d7 c-w50 c-flex-row c-flex-center c-fc-white">立即购买</div>
      </div>
      <!-- 购买套餐 -->
      <div v-else-if="isIosGzhPay && showBuyPackage" @click="backPackage" class="c-fs24 theme-fc theme-bd1 c-pv12 c-br30 c-ph40 c-textAlign-c">
        购买套餐
      </div>
      <!-- 好友助力 && 屏蔽微信支付 -->
      <div v-else-if="!isIosGzhPay && showFriendHelper" :class="!showInvitionCard && !showMarketingCard && !showPresentFriend ? 'c-w100 c-flex-center':''" class="c-flex-row c-hh64">
        <div class="c-h c-fs26 c-flex-column c-aligni-center theme-fc c-justify-sa theme-bd1 c-ww196 c-br32 c-mr10" @click="clickIosExperience">
          立即体验
        </div>
        <div class="c-h c-fs26 c-flex-column c-aligni-center c-fc-white c-justify-sa c-ww196 c-br32" :class="friendHelperStatus == 2 ? 'theme-bg' : 'c-bg-d7'" @click="goHelpDetail">
          灌溉领取
        </div>
      </div>
      <!-- 屏蔽支付 &&  （显示购买按钮 || 拼团） -->
      <div v-else-if="!isIosGzhPay && (showBuyButton || showBuyPackage) && !showBackPackage" @click="clickIosExperience" class="theme-bg c-fc-white c-lh c-w0 c-flex-grow1 c-flex-row c-flex-center c-hh64 c-br36 c-fs28">立即体验</div>
      <div v-else-if="!isIosGzhPay && (showBuyButton || showBuyPackage) && showBackPackage" class="theme-bd1 c-lh c-w0 c-flex-grow1 c-flex-row c-br36 c-fs28 c-text-hidden">
        <div class="c-hh64 c-w50 c-flex-row c-flex-center theme-fc c-bg-white">所属专栏</div>
        <div class="c-hh64 c-w50 c-flex-row c-flex-center c-fc-white theme-bg" @click="clickIosExperience">立即体验</div>
      </div>
      <!-- 展示表单 (训练营进入的课程，不需要填表单)（如果有权限但是没有填写过表单的，又关连表单的展示，如果没权限又关表单的则在立即购买的函数中处理） -->
      <div v-else-if="!(campButtonStatus && campButtonStatus.campPermission) && showFormText && !showBackPackage && Number(extColumnId) == -1" @click="clickGoForm" class="theme-bg c-fc-white c-lh c-w0 c-flex-grow1 c-flex-row c-flex-center c-hh64 c-br36 c-fs28">立即学习</div>
      <div v-else-if="showFormText && showBackPackage" class="theme-bd1 c-lh c-w0 c-flex-grow1 c-flex-row c-br36 c-fs28 c-text-hidden">
        <div class="c-hh64 c-w50 c-flex-row c-flex-center theme-fc c-bg-white">所属专栏</div>
        <div class="c-hh64 c-w50 c-flex-row c-flex-center c-fc-white theme-bg" @click="clickGoForm">立即学习</div>
      </div>
      <!-- 专栏跳转过来的对应专栏业务按钮 -->
      <div v-else-if="Number(extColumnId) != -1 && columnPermission"
        class="c-hh64 c-fs24 c-flex-row c-aligni-center c-justify-sb c-w0 c-flex-grow1 c-bd1-ccc c-br32 c-text-hidden">
        <div @click="popColumnList" class="c-textAlign-c c-hh64 c-lh64 c-w28 c-bd-r1-ccc">目录</div>
        <div @click="goBeforeCourse" :class="[prevLessons && prevLessons.item ? 'c-fc-xblack' : 'c-fc-sgray']" class="c-textAlign-c c-hh64 c-lh64 c-w36 c-bd-r1-ccc">上一章</div>
        <div @click="goNextCourse" :class="[nextLessons && nextLessons.item ? 'c-fc-xblack' : 'c-fc-sgray']" class="c-textAlign-c c-hh64 c-lh64 c-w36 c-br-tr32 c-br-br32">下一章</div>
      </div>
      <div v-else-if="Number(extCampId) != -1 && campButtonStatus && campButtonStatus.campPermission && !campButtonStatus.isTeacher" class="c-hh64 c-fs24 c-flex-row c-aligni-center c-justify-sb c-w0 c-flex-grow1 c-bd1-ccc c-br32 c-text-hidden">
        <div @click="handleCampDirectory(0)" class="c-textAlign-c c-hh64 c-lh64 c-w28 c-bd-r1-ccc">目录</div>
        <div @click="handleCampDirectory(-1)" :class="[campButtonStatus && campButtonStatus.isPrev ? 'c-fc-xblack' : 'c-fc-sgray']" class="c-textAlign-c c-hh64 c-lh64 c-w36 c-bd-r1-ccc"><span v-show="(campButtonStatus.isPrev && !campButtonStatus.isPrevUnlock) && !campButtonStatus.isTeacher" class="iconfont c-mr4 c-fs24">&#xe7a5;</span>上一任务</div>
        <div @click="handleCampDirectory(1)" :class="[campButtonStatus && campButtonStatus.isNext ? 'c-fc-xblack' : 'c-fc-sgray']" class="c-textAlign-c c-hh64 c-lh64 c-w36 c-br-tr32 c-br-br32"><span v-show="(campButtonStatus.isNext && !campButtonStatus.isNextUnlock) && !campButtonStatus.isTeacher" class="iconfont c-mr4 c-fs24">&#xe7a5;</span>下一任务</div>
      </div>
      <!-- 正常显示 -->
      <div v-else id="btnSlot" class="c-flex-grow1 c-flex-row c-aligni-center c-justify-end" :class="isShowPartner?'c-w50':'c-w0'">
        <div class="line-column c-hh20" v-if="isShowPartner">|</div>
        <slot></slot>
      </div>

    </section>
    <share-present :ckFromTitle="ckFromTitle" :isShowPresent="isShowPresent" v-show="isShowPresent" @closePresent="isShowPresent=false;" @goPresent="presentFriend"></share-present>
    <!-- <div @click="closeFirstScroll" v-if="showFirstScroll" class="masker">
      <div class="c-fs28 c-fw-b c-fc-white c-pa p-l100 c-p-b300 c-pz1003 c-textAlign-c">
        <div class="c-center">上滑页面后这里</div>
        <div class="c-center">可以切换专栏章节</div>
      </div>
      <img src="@/assets/i/wap/course/jiantou.png" class="c-ww180 c-hh180 c-pa c-p-l38 c-p-b100 c-pz1003" />
      <img src="@/assets/i/wap/course/prevnext.png" class="c-ww260 c-hh88 c-pa c-p-l0 c-p-b0 c-pz1003" />
      <img src="@/assets/i/wap/course/arrow.png" class="c-ww120 c-hh260 c-pa l272 b420 c-pz1003" />
      <img src="@/assets/i/wap/course/hand.png" class="c-ww80 c-hh80 c-pa l400 b440 c-pz1003" />
    </div> -->
  </article>
</template>

<script>
import sharePresent from "@/components/templates/common/presentMaster.vue";
import { utilJs } from "@/utils/common.js"
let startY = 0;
let endY = 0;
export default {
  name: "BottomBuyCom",
  components: {
    sharePresent,
  },
  props: {
    isUserGroupUrl: { //z直播指定用户是否有链接
      type: Boolean,
      default: false,
    },
    ckFromTitle: {
      type: String,
      default: '课程'
    },
    ckFrom: { //模块
      type: Number,
      default: -1
    },
    showShareMoneyTip: { //是否显示邀请赚钱
      type: Boolean,
      default: false,
    },
    deductibleAfterInvition: { //邀请赚钱金额
      type: String,
      default: ''
    },
    showInvitionCard: { //是否显示邀请好友
      type: Boolean,
      default: false,
    },
    isShowPartner: { //判断是否是服务商身份
      type: Boolean,
      default: false,
    },
    showSpreadAgent: { //是否显示服务商海报
      type: Boolean,
      default: false,
    },
    sreadAgentName: { //服务上或者股东海报名称
      type: String,
      default: ''
    },
    showMarketingCard: { //是否显示活动海报
      type: Boolean,
      default: false,
    },
    showShareFriends: { //是否显示分享好友
      type: Boolean,
      default: false,
    },
    showPresentFriend: { //是否显示赠送好友
      type: Boolean,
      default: false,
    },
    showBuyPackage: { //是否购买套餐
      type: Boolean,
      default: false,
    },
    showBuyButton: { //是否显示购买按钮（true则要替换为立即体验，代表没权限进入）
      type: Boolean,
      default: false,
    },
    showFriendHelper: { //是否友情灌溉购买
      type: Boolean,
      default: false,
    },
    showKnowledge: { //是否展示随堂互动知识点按钮
      type: Boolean,
      default: false,
    },
    showBelong: {
      type: Boolean,
      default: false,
    },
    showCommentBtn: { //是否展示评论按钮
      type: Boolean,
      default: false,
    },
    friendHelperStatus: { //友情灌溉状态
      type: Number,
      default: 0,
    },
    showFormText: { //是否显示表单(true点击进入表单，false不显示按钮)
      type: Boolean,
      default: false,
    },
    showNotSale: { //是否显示已停售按钮
      type: Boolean,
      default: false,
    },
    notSale: { //是否已停售
      type: Boolean,
      default: false,
    },
    isNew: { //新的底部
      type: Boolean,
      default: false,
    },
    showBackPackage: { //是否展示'所属专栏'按钮
      type: Boolean,
      default: false,
    },
    bottomBuyDirection: {
      type: Number,
      default: 1
    },
    isSaleTogether: {
      type: Boolean,
      default: false,
    },
    extColumnId: {
      type: Number,
      default: -1,
    },
    isOffSale: { //是否下架
      type: Boolean,
      default: false,
    },
    hasExpired: { //是否已经失效，失效日期后不能购买
      type: Boolean,
      default: false,
    },
    timingPutOn: { //是否定时上架
      type: Boolean,
      default: false,
    },
    delayTime: { //上架时间
      type: String,
      default: ''
    },
    showFirstScroll: {
      type: Boolean,
      default: false,
    },
    isDistribution: {
      type: Boolean,
      default: false,
    },
    isNeedPay: { // 是否需要支付，用于判断是否是小程序ios并且没有权限且需要支付的时候，只显示咨询客服按钮
      type: Boolean,
      default: false,
    },
    nextLessons: { // 下一章课程内容
      type: Object,
      default: null,
    },
    prevLessons: { // 下一章课程内容
      type: Object,
      default: null,
    },
    columnPermission: { // 专栏权限
      type: Boolean,
      default: false,
    },
    // 优化训练营播放
    extCampId: { // 课程关联的训练营id
      type: Number,
      default: -1,
    },
    campButtonStatus: { // 当前课程是否有上下节、课程关联的训练营权限等信息
      type: Object,
      default: () => {}
    },
    isGroupPurchase: { //企业团购
      type: Boolean,
      default: false,
    },
    tryStudy: {
      type: Boolean,
      default: false,
    }
  },
  watch: {
    bottomBuyDirection: {
      handler(val, oldVal) {
        if (Number(this.extColumnId) != -1) {
          this.barLeftStatus = this.bottomBuyDirection;
          // this.showFirstScroll = true;
          // localStorage.setItem('showFirstScroll', true);
        }
      }
    }
  },
  data() {
    return {
      theme: localStorage.getItem("colorName") || "mb5_default",
      isIosGzhPay: false, //是否开启ios支付
      isShowPresent: false, //赠送好友弹窗
      customName: JSON.parse(localStorage.getItem("customName")), //自定义服务商名称
      barLeftStatus: 1,
      isCustServiceOpen: localStorage.getItem("isCustServiceOpen") == 1 ? true : false,
      hasSlot: true, // 插槽内是否有显示元素
    };
  },
  computed: {
    hasBtn() { // 判断当前组件内是否有显示的按钮
      return this.hasSlot || this.showInvitionCard || (this.showMarketingCard && !this.$isWxApp()) || (this.showShareFriends && !this.$isWxApp()) ||
      (this.showSpreadAgent && !this.$isWxApp()) || (this.showPresentFriend && this.isIosGzhPay && !this.notSale && !this.$isWxApp()) ||
      (this.showCommentBtn && !this.isOffSale && !this.hasExpired && !this.timingPutOn) || this.showKnowledge ||
      (this.showNotSale || this.hasExpired || this.isOffSale) || this.timingPutOn || (this.isIosGzhPay && this.showBuyPackage) ||
      (!this.isIosGzhPay && this.showFriendHelper) || (!this.isIosGzhPay && (this.showBuyButton || this.showBuyPackage)) || this.showFormText
    }
  },
  mounted() {
    this.isShowPresent = false;
    this.isIosGzhPay = this.isOpenIosGzhPay();
    this.customName = JSON.parse(localStorage.getItem("customName"));
    this.barLeftStatus = 1;
    if (this.isSaleTogether && Number(this.extColumnId) != -1) {
      document.removeEventListener('touchstart', this.getStartP);
      document.removeEventListener('touchend', this.getEndP);
      document.addEventListener('touchstart', this.getStartP);
      document.addEventListener('touchend', this.getEndP);
    }
    this.$nextTick(() => {
      // 插槽元素
      const btnSlotDom = document.getElementById('btnSlot') || {}
      // 插槽内是否有显示元素（插槽宽高都不为0）
      this.hasSlot = btnSlotDom.offsetWidth && btnSlotDom.offsetHeight
    })

  },
  activated() {
    this.isShowPresent = false;
    this.isIosGzhPay = this.isOpenIosGzhPay();
    this.customName = JSON.parse(localStorage.getItem("customName"));
    //防止刚进入页面没获取到，2s后重新去获取一次
    setTimeout(() => {
      this.isIosGzhPay = this.isOpenIosGzhPay();
    }, 2000);
    this.$nextTick(() => {
      // 插槽元素
      const btnSlotDom = document.getElementById('btnSlot') || {}
      // 插槽内是否有显示元素（插槽宽高都不为0）
      this.hasSlot = btnSlotDom.offsetWidth && btnSlotDom.offsetHeight
    })
  },
  destroyed() {
    if (this.isSaleTogether && Number(this.extColumnId) != -1) {
      document.removeEventListener('touchstart', this.getStartP);
      document.removeEventListener('touchend', this.getEndP);
    }
  },
  methods: {
    goHomePage() {
      this.$routerGo(this, "push", {
        path: "/"
      });
    },
    clickGroupPurchase() {
      this.$emit('groupPurchase')
    },
    clickTryStudy() {
      this.$emit('tryStudy')
    },
    goWxAppContact() {
      utilJs.miniProgramGoTo('push', "/pages/member/contact/index")
    },
    finishFn() {
      this.$emit('putOn')
    },
    getStartP(ev) {
      startY = ev.touches[0].pageY;
    },
    getEndP(ev) {
      endY = ev.changedTouches[0].pageY;
      let dy = startY - endY;
      if (dy < 0 && this.barLeftStatus == 2) {
        this.barLeftStatus = 3;
      } else if (dy > 0) {
        this.barLeftStatus = 2;
      }
    },
    seeKnowledgePoint() {
      this.$emit('seeKnowledgePoint')
    },
    showBelongCourse() {
      this.$emit('showBelongCourse')
    },
    clickComment() {
      this.$emit('clickComment');
    },
    isOpenIosGzhPay() {
      let isIosWx = navigator.userAgent.toLowerCase().indexOf('mac') > -1 && navigator.userAgent.toLowerCase().indexOf('micromessenger') > -1;
      let gzhPayConfs = localStorage.getItem('iosGzhPayConfs') && JSON.parse(localStorage.getItem('iosGzhPayConfs'));
      //不在ios微信内 || 没有返回内容，默认可支付
      if (!isIosWx || !gzhPayConfs) {
        return true;
      }
      //后台设置为开启支付
      if (gzhPayConfs.iosGzhPayAll == 1) {
        return true;
      }
      const moduleTypeMap = global.moduleTypeMap;
      if (gzhPayConfs.iosGzhPayAll == -1 || gzhPayConfs[moduleTypeMap[this.ckFrom]] == -1) {
        return false;
      }
      return true;
    },
    //点击赠送好友弹窗的购买
    presentFriend() {
      this.$emit('clickBuyNow', true)
    },
    //点击邀请好友
    spreadInvite() {
      this.$emit('spreadInvite')
    },
    shareFriends() {
      this.$emit('shareFriends')
    },
    handleClickDetail() {
      this.$emit('handleClickDetail')
    },
    //点击活动海报
    invitePoster() {
      this.$emit('invitePoster')
    },
    //点击服务商海报
    spreadAgent() {
      this.$emit('spreadAgent')
    },
    //点击购买套餐
    backPackage() {
      this.$emit('backPackage')
    },
    //点击友情灌溉
    goHelpDetail() {
      this.$emit('goHelpDetail')
    },
    //点击ios立即体验
    clickIosExperience() {
      this.$store.commit('updateShowVitualModal', true);
    },
    //点击跳转到表单页面
    clickGoForm() {
      this.$emit('goFormDetail');
    },
    goBeforeCourse() {
      if (!this.columnPermission) return
      if (this.prevLessons && this.prevLessons.item) {
        this.$emit('goColumnCourse', this.prevLessons.item, this.prevLessons.index)
      }
    },
    goNextCourse() {
      if (!this.columnPermission) return
      if (this.nextLessons && this.nextLessons.item) {
        this.$emit('goColumnCourse', this.nextLessons.item, this.nextLessons.index)
      }
    },
    goToTop() {
      if (!this.isDistribution) {
        this.barLeftStatus = 3;
      }
      this.$emit('goToTop');
    },
    popColumnList() {
      this.$emit('popColumnList');
    },
    closeFirstScroll() {
      this.$emit('closeFirstScroll');
    },
    handleCampDirectory(type) { // type  0查看目录弹窗  -1上一节  1下一节
      this.$emit('handleCampDirectory', type);
    }
  }
};
</script>


<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.invite-animation {
  animation: yqAni 3s linear infinite;
  -webkit-animation: yqAni 3s linear infinite;
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}
@keyframes yqAni {
  0% {
    width: 0.8rem;
  }
  8% {
    width: 0;
  }
  16% {
    width: 0.8rem;
  }
  100% {
    width: 0.8rem;
  }
}
.c-box-shadow9{
  box-shadow: 0 -3px 10px 0 rgba(0, 0, 0, 0.1);
}
.line-column {
  color: #F6F6F6;
  font-size: 0.5rem;
}
.c-hh176 {
  height: 4.4rem;
}
.goDown {
  animation: scrollDown 0.5s linear forwards;
  -webkit-animation: scrollDown 0.5s linear forwards;
}
.goUp {
  animation: scrollUp 0.5s linear forwards;
  -webkit-animation: scrollUp 0.5s linear forwards;
}
.bg-off-sale {
  background-color: #fff3eb;
}
.p-b88 {
  bottom: 2.2rem;
}
.p-l100 {
  left: 2.5rem;
}
.c-p-b300 {
  bottom: 7.5rem;
}
.b420 {
  bottom: 10.5rem;
}
.l272 {
  left: 6.8rem
}
.b440 {
  bottom: 11rem;
}
.l400 {
  left: 10rem
}
.c-itfc {
  color: #fe9901;
}
.masker {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1002;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: flex-end;
}
.bottom-shadow {
  box-shadow: 0px -2px 4px 0px rgba(0,0,0,0.05);
}
.c-mww180 {
  min-width: 4.5rem;
}
@keyframes scrollDown {
  0% {
    top: 0;
  }
  100% {
    top: -1.6rem
  }
}
@keyframes scrollUp {
  0% {
    top: -1.6rem;
  }
  100% {
    top: 0;
  }
}
.urlShadow{
  box-shadow: 0 2px 10px 0 #0000001a;
}
</style>
